<!DOCTYPE html>
<html lang="en">

<head>
	<title>小鹿线</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="css/swiper-bundle.min.css">
	<link rel="stylesheet" href="./css/animate.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>


<body>

	<div class="header">
		<div class="nav">
			<div class="wrap u-clearfix">
				<h1 class='u-l'><img src="images/pic_logo.png"></h1>
				<ul class='u-r u-clearfix'>
					<li class='active'><a href="index.html">首 页</a></li>
					<li><a href="">学习路线</a></li>
					<li><a href="curriculum.html">在线课程</a></li>
					<li><a href="product.html">产品中心</a></li>
					<li><a href="student.html">成功就业</a></li>
					<li><a href="about.html">关于我们</a></li>
				</ul>
			</div>
		</div>

		<!--swiper部分-->
		<div class="swiper-container">
			<div class="swiper-wrapper banner">

			</div>
		</div>
		<div class="header-card">
			<div class='card-content u-clearfix'>
				<h2 class='u-l'>WEB全栈系列</h2>
				<ul class='u-r u-clearfix'>
					<li><img src="images/wx.jpg"></li>
					<li><img src="images/uni.jpg"></li>
				</ul>
			</div>
		</div>
		<div class='mask'></div>
	</div>

	<div class='container'>
		<!-- 开班计划 -->
		<div class='plan'>
			<div class='content-wrap u-clearfix'>
				<div class="plan-left u-l">
					<div class='plan-card'>
						<h3>开班计划</h3>
						<p>五大前端课程，跟随企业需求不断提升技能</p>
					</div>
					<div class='line'>
						<span>课程详情</span>
					</div>
				</div>
				<div class="plan-right u-r">
					<ul class='plan-list u-clearfix' id="planList">



					</ul>
					<ul class='course-list'>
						<li class="u-clearfix">
							<div class="course-left u-l">
								<div class='course-title'>
									<h3>WEB前端企业级项目</h3>
									<p>零基础入门web前端到就业课程
									</p>
								</div>
								<div class="course-stage">
									<p>第一阶段</p>
								</div>
							</div>
							<div class="course-right u-r">
								<img src="images/quan.jpg">
								<a href=""></a>
							</div>
						</li>
						<li class="u-clearfix">
							<div class="course-left u-l">
								<div class='course-title'>
									<h3>WEB前端企业级项目</h3>
									<p>
										从项目中提升自己，掌握更多的编程技巧
									</p>
								</div>
								<div class="course-stage">
									<p>第二阶段</p>
								</div>
							</div>
							<div class="course-right u-r">
								<img src="images/start.jpg">
								<a href=""></a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 企业项目 -->
		<div class='plan'>
			<div class='content-wrap u-clearfix'>
				<div class="plan-left u-l">
					<div class='plan-card'>
						<h3>企业项目</h3>
						<p>五大前端课程，跟随企业需求不断提升技能</p>
					</div>
					<div class='line'>
						<span>课程详情</span>
					</div>
				</div>
				<div class="plan-right u-r">
					<ul class='plan-list u-clearfix' id="planList1">

					</ul>
					<div class='plan-line'></div>
					<ul class='plan-list u-clearfix' id="planList2">

					</ul>
				</div>
			</div>
		</div>
		<div class='footer'>
			<div class='footer-wrap'>
				<div class='u-l footer-logo'>
					<img src="images/pic_logo.png">
				</div>
				<div class='footer-txt'>
					<ul class="u-clearfix">
						<ul class="u-clearfix">
							<li><a href="mailto:TS@xuexiluxian.com">商务合作</a></li>
							<li><a href="mailto:TS@xuexiluxian.com">意见反馈</a></li>
							<li><a href="about.html">关于我们</a></li>
							<li><a href="javascript:;">联系我们</a></li>
							<li><a href="javascript:;" id='copyright'>版权声明</a></li>
						</ul>
					</ul>
					<p>© 2020, 小鹿线保留所有权利. 京ICP备18061704号-3</p>
				</div>
				<div class='u-r'>
					<ul class="qr-code u-clearfix">
						<li>
							<p>微信公众号</p>
							<div><img src="images/xuexi.jpg"></div>
						</li>
						<li>
							<p>微信公众号</p>
							<div><img src="images/jiuye.jpg"></div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!--弹出层HTML结构-->
	<div id="myModal" class="myModal">
		<!-- Modal Content Here -->
		<h3>版权声明</h3>
		<p>© 2020, 小鹿线保留所有权利. 京ICP备18061704号-3</p>
		<!-- Custom Close Button -->
		<b class="myModal-close js-popup-close">x</b>
	</div>
	<script src="./js/browserRedirect.js"></script>
	<script src='js/swiper-bundle.min.js'></script>
	<script src='js/jquery-1.11.min.js'></script>
	<script src="./js/jquery.popup.min.js"></script>
	<script>
		$(function () {
			$('#copyright').click(function () {
				$('#myModal').popup();

			})
			var sBanner = '';
			// 开班计划的内容
			var sList = '';
			// 企业项目数据
			var planList1 = '';
			var planList2 = '';
			$.ajax({
				url: 'http://39.101.217.150:8075/banner/list',
				type: 'POST',
				success: function (data) {
					var datas = data.data;
					$.each(datas, function (index, item) {
						sBanner += `
					<div class="swiper-slide">
						<img src="${item.url}">
					</div>`;
					})
					// 数据的渲染 是用来es6的模板字符串
					$('.banner').append(sBanner);
					//swiper代码
					var mySwiper = new Swiper('.swiper-container', {
						loop: true,
						effect: 'cube',
					});
				}
			})
			// 请求开班计划的数据
			$.ajax({
				url: `http://39.101.217.150:8075/classplan/list`,
				type: 'get',
				data: {
					page: 1,
					size: 3
				},
				success: function (res) {

					// 数据数组
					var aRecode = res.data.records;
					$.each(aRecode, function (index, item) {
						sList += `
								<li>
										<div><img src="${item.imgurl}"></div>
										<h3>${item.name}</h3>
										<p class='crowd'>零基础入门</p>
										<p class='time'>开班时间：${item.classTime}</p>
										<div class='consultation'><a href="">立即抢座</a></div>
								</li>
							`

					})
					$('#planList').append(sList)
				}

			})
			// 企业项目
			$.ajax({
				url: `http://39.101.217.150:8075/apps/list`,
				type: 'get',
				data: {
					page: 1,
					size: 3
				},
				success: function (res) {

					// 数据数组
					var aRecode = res.data.records;
					console.log(aRecode);
					$.each(aRecode, function (index, item) {
						planList1 += `				
							<li>
							<a href='${item.appurl}' target='_blank'>
									<div><img src="${item.imgurl}"></div>
									<h3>${item.appName}</h3>
									<div class='plan-original'>
										<span class='original'>原创</span>
										<i class='icon i1'></i>
										<span>${item.appTime}</span>	
									</div>
									</a>
							</li>
							`

					})
					$('#planList1').append(planList1)
				}
			})

			$.ajax({
				url: `http://39.101.217.150:8075/apps/list`,
				type: 'get',
				data: {
					page: 1,
					size: 3
				},
				success: function (res) {

					// 数据数组
					var aRecode = res.data.records;
					$.each(aRecode, function (index, item) {
						planList2 += `
							<li>
							<a href='${item.appurl}' target='_blank'>
									<div><img src="${item.imgurl}"></div>
									<h3>${item.appName}</h3>
									<div class='plan-original'>
										<span class='original'>原创</span>
										<i class='icon i1'></i>
										<span>${item.appTime}</span>	
									</div>
								</a>
							</li>
							`

					})
					$('#planList2').append(planList2)
				}
			})

		});

	</script>


</body>

</html>